
import React, { Component } from 'react'
import MyNavBar from '../../../components/MyNavBar'
import styles from './index.module.scss'
import { List, InputItem, Picker, ImagePicker, TextareaItem, Flex, Toast, Modal } from 'antd-mobile'
import HouseMatch from '../../../components/HouseMatch'
import { connect } from 'react-redux'
import { uploadImage, publishHouse } from '../../../api/rent'
const Item = List.Item
// 房屋类型
const roomTypeData = [
    { label: '一室', value: 'ROOM|d4a692e4-a177-37fd' },
    { label: '二室', value: 'ROOM|d1a00384-5801-d5cd' },
    { label: '三室', value: 'ROOM|20903ae0-c7bc-f2e2' },
    { label: '四室', value: 'ROOM|ce2a5daa-811d-2f49' },
    { label: '四室+', value: 'ROOM|2731c38c-5b19-ff7f' }
]

// 楼层
const floorData = [
    { label: '高楼层', value: 'FLOOR|1' },
    { label: '中楼层', value: 'FLOOR|2' },
    { label: '低楼层', value: 'FLOOR|3' }
]

// 朝向：
const orientedData = [
    { label: '东', value: 'ORIEN|141b98bf-1ad0-11e3' },
    { label: '西', value: 'ORIEN|103fb3aa-e8b4-de0e' },
    { label: '南', value: 'ORIEN|61e99445-e95e-7f37' },
    { label: '北', value: 'ORIEN|caa6f80b-b764-c2df' },
    { label: '东南', value: 'ORIEN|dfb1b36b-e0d1-0977' },
    { label: '东北', value: 'ORIEN|67ac2205-7e0f-c057' },
    { label: '西南', value: 'ORIEN|2354e89e-3918-9cef' },
    { label: '西北', value: 'ORIEN|80795f1a-e32f-feb9' }
]
class RentAdd extends Component {
    constructor(props) {
        super()

        this.state = {
            community: props.community, // 小区的id
            files: [], // 放的就是我们选择的图片
            title: '', // 标题
            description: '', // 描述
            //houseImg: "img1|im2|img3", // 最终上传时候的图片
            oriented: '', // 朝向
            supporting: '', // 房屋配置套
            price: '', // 租金
            roomType: '', // 房屋的类型
            size: '', // 建筑面积
            floor: '' // 楼层
        }
    }
    // 房屋头像
    onChange = (files, type, index) => {
        // console.log(files, type, index)
        this.setState({
            files
        })
    }
    changeValue = (name, val) => {
        this.setState({
            [name]: val
        })
    }
    changeSupporting = (val) => {
        this.setState({
            supporting: val
        })
    }
    // 取消按钮
    cancel = () => {
        Modal.alert('提示', '放弃发布房源？', [
            { text: '放弃', onPress: () => this.props.history.goBack() },
            { text: '继续编辑' }
        ])
    }
    // 确定按钮
    submit = async () => {
        // 数据校验
        const {
            community,
            files,
            title,
            description,
            oriented,
            supporting,
            price,
            roomType,
            size,
            floor
        } = this.state
        if (!community) {
            Toast.info('小区不能为空~', 1.2)
            return
        }
        if (price.trim().length === 0) {
            Toast.info('租金不能为空~', 1.2)
            return
        }
        if (size.trim().length === 0) {
            Toast.info('建筑面积不能为空~', 1.5)
            return
        }

        if (roomType.trim().length === 0) {
            Toast.info('户型不能为空~', 1.5)
            return
        }

        if (floor.trim().length === 0) {
            Toast.info('所在楼层不能为空~', 1.5)
            return
        }

        if (oriented.trim().length === 0) {
            Toast.info('朝向不能为空~', 1.5)
            return
        }

        if (title.trim().length === 0) {
            Toast.info('房屋标题不能为空~', 1.5)
            return
        }

        if (files.length === 0) {
            Toast.info('房屋头像不能为空~', 1.5)
            return
        }

        if (supporting.trim().length === 0) {
            Toast.info('房屋配套不能为空~', 1.5)
            return
        }

        if (description.trim().length === 0) {
            Toast.info('房屋描述不能为空~', 1.5)
            return
        }
        // 先做图片上传
        const res1 = await uploadImage(files)
        // 再发布房源
        if (res1.data.status === 200) {
            const data = {
                community,
                title,
                description,
                oriented,
                supporting,
                price,
                roomType,
                size,
                floor,
                houseImg: res1.data.body.join('|')
            }
            const res2 = await publishHouse(data)
            if (res2.data.status === 200) {
                Toast.info('发布成功~', 1.5, () => {
                    this.props.history.replace('/rent')
                })

            } else {
                Toast.info('服务器异常~', 1.5)

            }
        }

    }
    render() {
        const { files, price, size, title, description, roomType, floor, oriented } = this.state
        return (
            <div className={styles.root}>
                <MyNavBar>发布房源</MyNavBar>
                <List renderHeader={() => '房源信息'} >
                    <Item arrow='horizontal' extra={
                        this.props.communityName
                            ? this.props.communityName
                            : '请输入小区名称'
                    }
                        onClick={() => { this.props.history.push('/rent/search') }}>
                        小区名称
                    </Item>
                    <InputItem
                        value={price}
                        onChange={val => this.changeValue('price', val)}
                        placeholder='请输入租金/月' extra='￥/月'>
                        租&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金
                    </InputItem>
                    <InputItem
                        value={size}
                        onChange={val => this.changeValue('size', val)}
                        placeholder='请输入建筑面积' extra='㎡'>
                        建筑面积
                    </InputItem>
                    <Picker cols={1}
                        data={roomTypeData}
                        value={[roomType]}
                        onChange={val => this.changeValue('roomType', val[0])}>
                        <List.Item arrow='horizontal'>
                            户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型
                        </List.Item>
                    </Picker>
                    <Picker
                        data={floorData}
                        cols={1}
                        value={[floor]}
                        onChange={val => this.changeValue('floor', val[0])}
                    >
                        <List.Item arrow='horizontal'>所在楼层</List.Item>
                    </Picker>
                    <Picker
                        data={orientedData}
                        cols={1}
                        value={[oriented]}
                        onChange={val => this.changeValue('oriented', val[0])}
                    >
                        <List.Item arrow='horizontal'>
                            朝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;向
                         </List.Item>
                    </Picker>

                </List>
                <List renderHeader={() => '房屋标题'} >
                    <InputItem value={title}
                        onChange={val => this.changeValue('title', val)}
                        placeholder='请输入标题（例如：整租 小区名 2室 5000元）'></InputItem>
                </List>
                <List renderHeader={() => '房屋头像'} >
                    <ImagePicker files={files}
                        onChange={this.onChange}
                        selectable={files.length < 9}
                        length='3'
                        multiple />
                </List>
                <List renderHeader={() => '房屋配套'}>
                    <HouseMatch readonly={false} onChange={this.changeSupporting} />
                </List>
                <List renderHeader={() => '房屋描述'}>
                    <TextareaItem value={description}
                        onChange={val => this.changeValue('description', val)}
                        placeholder='请输入房屋描述' rows={5}></TextareaItem>
                </List>
                <Flex className={styles.bottom}>
                    <Flex.Item onClick={this.cancel} className={styles.cancel}>取消</Flex.Item>
                    <Flex.Item onClick={this.submit} className={styles.confirm}>提交</Flex.Item>
                </Flex>
            </div>
        )
    }
}
const mapStateToProps = ({ community, communityName }) => {
    return {
        community,
        communityName
    }
}
export default connect(mapStateToProps, null)(RentAdd)
